<style scoped>
</style>

<template>
    <i-form v-ref:form-validate :model="formValidate" :rules="ruleValidate" :label-width="80">
        <Form-item label="用户名" prop="name">
            <i-input :value.sync="formValidate.name" placeholder="请输入用户名"></i-input>
        </Form-item>
        <Form-item label="用户代码" prop="userCode">
            <i-input :value.sync="formValidate.userCode" placeholder="请输入用户代码"></i-input>
        </Form-item>
        <Form-item label="电话" prop="phone">
            <i-input :value.sync="formValidate.phone" placeholder="请输入电话"></i-input>
        </Form-item>
        <Form-item label="邮箱" prop="mail">
            <i-input :value.sync="formValidate.mail" placeholder="请输入邮箱"></i-input>
        </Form-item>
        <Form-item label="组织名" prop="orz">
            <i-select :model.sync="formValidate.orz" placeholder="请选择组织名">
                <i-option value="beijing">北京市</i-option>
                <i-option value="shanghai">上海市</i-option>
                <i-option value="shenzhen">深圳市</i-option>
            </i-select>
        </Form-item>
        <Radio :checked.sync="single">Radio</Radio>
        <Form-item>
            <i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
            <i-button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</i-button>
        </Form-item>
    </i-form>
</template>
<script>
    export default {
            data () {
                return {
                    single: false,
                    formValidate: {
                        name: '',
                        userCode: '',
                        phone: '',
                        mail: '',
                        orz: ''
                    },
                    ruleValidate: {
                        name: [
                            { required: true, message: '姓名不能为空', trigger: 'blur' }
                        ],
                        userCode: [
                            { required: true, message: '用户代码', trigger: 'blur' }
                        ],
                        mail: [
                            { required: true, message: '邮箱不能为空', trigger: 'blur' },
                            { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
                        ],
                        orz: [
                            { required: true, message: '请选择组织', trigger: 'change' }
                        ],
                        phone: [
                            { required: true, message: '手机号', trigger: 'blur' },
                            { type: 'string', min: 6, message: '电话号不能少于6字符', trigger: 'blur' }
                        ]
                    }
                }
            },
            methods: {
                handleSubmit (name) {
                    this.$refs[name].validate((valid) => {
                        if (valid) {
                            this.$Message.success('提交成功!');
                        } else {
                            this.$Message.error('表单验证失败!');
                        }
                    })
                },
                handleReset (name) {
                    this.$refs[name].resetFields();
                }
            }
        }
    }
</script>
